@m-height: 10.75rem;
@pc-height: 37.3125rem;
@cl-color: #175292;
@bg-size: 1.875rem;

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
body, html {
	// overflow-x: hidden;
	width:100%;
} 
ul {
	li {
		list-style: none;
	}
}

a {
	text-decoration: none;
}

#header {
	position: sticky;
	top: 0;
	z-index: 9;
	width: 100%;
}

#container {
	background-color: #fff;
	overflow-x: hidden;
	.swiper-container {
		width: 100%;
		height: 100%;
		overflow: hidden;
	}

	.swiper-slide {
		text-align: center;
		font-size: 1.125rem;
		background: #fff;

		/* Center slide text vertically */
		display: -webkit-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		-webkit-justify-content: center;
		justify-content: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		-webkit-align-items: center;
		align-items: center;
	}

	.swiper-pagination {
		position: relative;
		bottom: 3.125rem;
	}

	.swiper-pagination-bullet-active {
		color: #fff;
		width: .625rem;
		height: .625rem;
		background: @cl-color;
	}

	.swiper-pagination-bullet {
		width: .625rem;
		height: .625rem;
		margin-bottom: 3rem;
	}

	.banner {

		.image {
			width: 100%;
			height: @pc-height;
			overflow: hidden;
			object-fit: cover;
		}

		@media (max-width: 48rem) {
			.image {
				transition: .3s;
				width: 100%;
				// height: @m-height;
				overflow: hidden;
			}
		}

		.img-word {
			position: absolute;
			top: 25%;
			left: 10%;
			color: #fff;
			width: 40%;
			text-align: left;

			.word-en {
				margin-bottom: 1.25rem;
				font-size: 1.125rem;
				font-family: Source Han Sans CN;
			}

			.word-content {
				line-height: 2rem;
				font-size: 1rem;
				overflow: hidden;
				text-overflow: ellipsis;
				-webkit-line-clamp: 4;
				display: -webkit-box;
				-webkit-box-orient: vertical;
			}
		}

		@media (max-width: 31.25rem) {
			.image {
				transition: .3s;
				width: 100%;
				height: @m-height;
				overflow: hidden;
			}

			.img-word {
				position: absolute;
				top: 13%;
				left: 10%;
				color: #fff;
				width: 40%;
				text-align: left;

				.word-title {
					font-size: 1rem;
					font-weight: bold;
				}

				.word-en {
					margin-bottom: .3125rem;
					font-size: .75rem;
					font-family: Source Han Sans CN;
				}

				.word-content {
					line-height: 1rem;
					font-size: .625rem;
					overflow: hidden;
					text-overflow: ellipsis;
					-webkit-line-clamp: 4;
					display: -webkit-box;
					-webkit-box-orient: vertical;
				}
			}
		}
	}

	.content {
		// padding-top: 3rem;
		margin: 0 auto;

		#category {
			width: 78.75rem;
			margin: 0 auto;

			.category-container {
				width: 100%;
				background-color: #fff;
			}

			.category-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				text-decoration: none;
				color: #333;
			}

			.category-image {
				object-fit: contain;
				margin-bottom: 13px;
			}

			.category-title {
				font-weight: 300;
				color: #333;
				text-align: center;
			}

			/* PC端轮播样式 */
			.pc-carousel {
				position: relative;
				padding: 20px 0;
				max-width: 1200px;
				margin: 0 auto;
			}

			.navigation {
				position: absolute;
				width: 25px;
				height: 43px;
				top: 50%;
				transform: translateY(-50%);
				background-size: cover;
				cursor: pointer;
				z-index: 3;
				border: none;
				background-color: transparent;
			}

			.navigation-prev {
				left: -25px;
				background-image: url('https://img.tongmen.cdn.dgyunju.cn/images/arrow-left.png');
			}

			.navigation-next {
				right: -25px;
				background-image: url('https://img.tongmen.cdn.dgyunju.cn/images/arrow-right.png');
			}

			.swiper-slide {
				// height: 196px;
			}

			.pc-carousel .category-image {
				height: 96px;
			}

			.pc-carousel .category-title {
				height: 14px;
				line-height: 14px;
				font-size: 14px;
			}

			/* 移动端flex布局 */
			.mobile-flex {
				display: none;
				flex-wrap: wrap;
				justify-content: space-between;
				padding: 15px 10px;
			}

			.mobile-flex .category-item {
				width: 48%;
				margin-bottom: 15px;
				padding: 10px;
				background: #f8f8f8;
				border-radius: 8px;
			}

			.mobile-flex .category-image {
				height: 80px;
				width: auto;
				max-width: 100%;
			}

			.mobile-flex .category-title {
				font-size: 12px;
			}

			/* 响应式控制 */
			@media (max-width: 768px) {
				.pc-carousel {
					display: none;
				}

				.mobile-flex {
					display: flex;
				}
			}
		}

		@media (max-width:78.75rem) {
			#category {
				margin-bottom: 2.5rem;
				width: 100%;
			}
		}



		#about {
			width: 78.75rem;
			margin: 0 auto;
			text-align: center;

			// .about_title {
			// 	margin-bottom: 2rem;
			// 	border-bottom: .2rem solid;
			// 	display: inline-block;
			// 	font-weight: bold;
			// 	font-size: @bg-size;
			// 	color: @cl-color;
			// }

			.about-container {
				width: 100%;
				padding: 60px 0 50px;
				background-color: #fff;
			}

			/* PC端布局 */
			.pc-about {
				display: flex;
				// max-width: 1200px;
				margin: 0 auto;
			}

			/* 左侧栏 */
			.about-sidebar {
				display: flex;
				flex-direction: column;
				padding-right: 20px;
				align-items: center;
				margin-right: 40px;
			}

			
			.about-title {
				padding: 0 0 20px;
				text-align: left;
				h2{
					color: #175292;
				}
				span {
					color: #858585;
					font-size: 14px;
					text-transform: uppercase;
				}

				.line {
					width: 50px;
					height: 4px;
					background-color: @cl-color;
					margin: 10px 0;
				}
			}
			.about-tabs{
				height: 100%;
				width: 100%;
				display: flex;
				flex-direction: column;
				justify-content: flex-end;
			}
			.tab-list {
				width: 100px;
				height: 25px;
				font-size: 14px;
				color: #333;
				margin-bottom: 15px;
				border-radius: 99em;
				cursor: pointer;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.tab-list.active {
				font-weight: bold;
				color: #2465a1;
				border: 1px solid #2465a1;
			}

			/* 内容区域 */
			.about-content {
				width: 75%;
				display: flex;
			}

			.content-left {
				width: 60%;
				padding-right: 20px;
				margin-right: 40px;
			}

			.content-right {
				width: 50%;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
			}

			.about-cover {
				width: 100%;
				height: 100%;
			}

			.about-text {
				max-height: 250px;
				overflow-y: auto;
				margin-bottom: 20px;
			}

			.about-text img {
				max-width: 100%;
				height: auto;
			}

			.about-info {
				display: flex;
				justify-content: space-between;
			}

			.info-item {
				text-align: center;

				.fi {
					font-size: 40px;
					color: #1b5390;
				}

				.info-value {
					font-size: 20px;

					.unit {
						font-size: 12px;
					}
				}

			}

			.info-icon {
				font-size: 24px;
				color: #2465a1;
				margin-bottom: 5px;
			}

			.info-value {
				font-size: 18px;
				font-weight: bold;
				color: #2465a1;
				margin-bottom: 3px;
			}

			.info-label {
				font-size: 10px;
				color: #999;
			}

			/* 荣誉墙布局 */
			.about-honor {
				width: 100%;
				padding-left: 20px;
			}

			.honor-slide {
				width: 283px;
				height: 222px;
				padding: 12px;
				border: 1px solid #eee;
				background-color: #fff;
			}

			.honor-image {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}

			.swiper-pagination {
				position: relative;
				margin-top: 15px;
			}

			/* 移动端布局 */
			.mobile-about {
				display: none;
				flex-direction: column;
				padding: 30px 15px;
			}

			.mobile-title {
				text-align: center;
				margin-bottom: 30px;
			}

			.mobile-title h2 {
				font-size: 20px;
				color: @cl-color;
				font-weight: bold;
				margin-bottom: 5px;
			}

			.mobile-tabs {
				display: flex;
				justify-content: center;
				margin-bottom: 20px;
				flex-wrap: wrap;
			}

			.mobile-tab {
				padding: 5px 15px;
				margin: 0 5px 10px;
				font-size: 14px;
			}

			.mobile-content {
				display: none;
			}

			#mobileContent {
				display: block;
			}

			.mobile-content.active {
				display: block;
			}

			.mobile-cover {
				width: 100%;
				height: auto;
				margin-bottom: 20px;
			}

			.mobile-info {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				margin-top: 20px;
			}

			.mobile-info-item {
				width: 48%;
				margin-bottom: 15px;
				text-align: center;

				.fi {
					font-size: 40px;
					color: #1b5390;
				}

				.info-value {
					font-size: 20px;

					.unit {
						font-size: 12px;
					}
				}
			}

			.mobile-honor {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
			}

			.mobile-honor-item {
				width: 48%;
				margin-bottom: 15px;
				padding: 10px;
				border: 1px solid #eee;
				background-color: #fff;
			}

			/* 响应式控制 */
			@media (max-width: 768px) {
				.pc-about {
					display: none;
				}

				.mobile-about {
					display: flex;
				}

				.about-container {
					padding: 30px 0;
				}
			}
		}

		@media (max-width:78.75rem) {
			#about {
				top: 0;
				margin-bottom: 2.5rem;
				width: 100%;
			}
		}

		@media (max-width:28.125rem) {
			#about {
				margin-bottom: 2.5rem;
			}
		}

		#news {
			width: 78.75rem;
			margin: 0 auto;
			text-align: center;

			.news_title {
				margin-bottom: 2rem;
				border-bottom: .2rem solid;
				display: inline-block;
				font-weight: bold;
				font-size: @bg-size;
				color: @cl-color;
			}

			.product-container {
				width: 100%;
				background-color: #fff;
				padding-bottom: 58px;
			}

			.product-title {
				padding: 68px 0 20px;
				text-align: center;

				span {
					color: #858585;
					font-size: 14px;
					text-transform: uppercase;
				}

				.line {
					width: 50px;
					height: 4px;
					background-color: @cl-color;
					margin: 10px auto;
					margin-bottom: 0;
				}
			}

			.product-title h2 {
				color: @cl-color;
				font-size: 24px;
				font-weight: bold;
			}

			/* 选项卡样式 */
			.tab-container {
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				margin-bottom: 20px;
			}

			.product-tab-list {
				height: 23px;
				line-height: 23px;
				width: 20%;
				font-size: 14px;
				font-weight: 300;
				text-align: center;
				color: #333;
				margin: 0 20px 17px;
				border: 1px solid #dcdfe6;
				border-radius: 99em;
				cursor: pointer;
				padding: 0 15px;
			}
			@media (max-width: 768px) {
				.product-tab-list {
					height: 23px;
					line-height: 23px;
					font-size: 12px;
					font-weight: 300;
					text-align: center;
					width: 35%;
					color: #333;
					margin: 0 20px 17px;
					border: 1px solid #dcdfe6;
					border-radius: 99em;
					cursor: pointer;
					padding: 0 15px;
				}
			}
			.product-tab-list.active {
				color: #fff;
				background-color: @cl-color;
				border: none;
			}

			/* PC端横向滚动布局 */
			.pc-product-list {
				height: 313px;
				overflow-x: auto;
				display: flex;
				flex-wrap: nowrap;
				align-items: stretch;
				padding: 0 20px;
				margin: 0 auto;
				max-width: 1200px;
			}

			.pc-product-list::-webkit-scrollbar {
				height: 6px;
			}

			.pc-product-list::-webkit-scrollbar-thumb {
				background-color: #c0c4cc;
				border-radius: 3px;
			}

			.pc-product-item {
				flex-shrink: 0;
				margin-right: 37px;
				display: flex;
				flex-direction: column;
				align-items: center;
				text-decoration: none;
				color: inherit;
			}

			.pc-product-image {
				width: 240px;
				height: 240px;
				margin-bottom: 13px;
				object-fit: contain;
			}

			.pc-product-name {
				height: 20px;
				line-height: 20px;
				font-size: 16px;
				font-weight: bold;
				color: #333;
				margin-bottom: 9px;
				text-align: center;
			}

			.pc-product-desc {
				color: #666;
				font-size: 14px;
				text-align: center;
			}

			/* 移动端flex两列布局 */
			.mobile-product-list {
				display: none;
				flex-wrap: wrap;
				justify-content: space-between;
				padding: 0 15px;
			}

			.mobile-product-item {
				width: 48%;
				margin-bottom: 25px;
				display: flex;
				flex-direction: column;
				align-items: center;
				text-decoration: none;
				color: inherit;
			}

			.mobile-product-image {
				width: 100%;
				height: auto;
				max-height: 150px;
				margin-bottom: 10px;
				object-fit: contain;
			}

			.mobile-product-name {
				font-size: 14px;
				font-weight: bold;
				color: #333;
				margin-bottom: 5px;
				text-align: center;
			}

			.mobile-product-desc {
				color: #666;
				font-size: 12px;
				text-align: center;
			}

			/* 空状态 */
			.empty-state {
				text-align: center;
				padding: 40px 0;
				color: #999;
			}

			/* 响应式控制 */
			@media (max-width: 768px) {
				.pc-product-list {
					display: none;
				}

				.mobile-product-list {
					display: flex;
				}

				.product-title {
					padding: 40px 0 20px;
				}

				.tab-list {
					margin: 0 10px 10px;
					font-size: 12px;
				}
			}

			.new_list {
				display: flex;
				align-items: center;
				// margin-bottom: 6.25rem;
				justify-content: space-around;

				.news_one {
					width: 32%;

					// height: 20.8125rem;
					.news_li {
						width: 100%;
						height: 100%;
						position: relative;

						.new_img {
							width: 100%;
							height: 100%;
						}

						.gollry {
							position: absolute;
							bottom: 3px;
							left: 0;
							width: 100%;
							height: 25%;
							padding: .9375rem;
							background: #175292ab;
							z-index: 9;
							color: #fff;
							text-align: left;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
							line-height: 1.2rem;
							font-size: .875rem;
						}
					}
				}
			}

			@media (max-width:78.75rem) {
				.new_list {
					display: flex;
					flex-direction: column;

					.news_one {
						width: 80%;
					}
				}
			}
		}

		@media (max-width:78.75rem) {
			#news {
				top: 0;
				margin-bottom: 2.5rem;
				width: 100%;
			}
		}

		.swiper-container {
			width: 100%;
			height: 100%;
			margin-bottom: 3.125rem;
			overflow: hidden;
		}

		.swiper-slide {
			text-align: center;
			font-size: 1.125rem;
			background: #fff;

			/* Center slide text vertically */
			display: -webkit-box;
			display: -ms-flexbox;
			display: -webkit-flex;
			display: flex;
			-webkit-box-pack: center;
			-ms-flex-pack: center;
			-webkit-justify-content: center;
			justify-content: center;
			-webkit-box-align: center;
			-ms-flex-align: center;
			-webkit-align-items: center;
			align-items: center;
		}

		.swiper-pagination {
			position: relative;
			bottom: 0;
		}

		.swiper-pagination-bullet-active {
			color: #fff;
			width: .625rem;
			height: .625rem;
			background: @cl-color;
		}

		.swiper-pagination-bullet {
			width: .625rem;
			height: .625rem;
			margin-bottom: 3rem;
		}
	}
}

@media (max-width:68.75rem) {
	footer {
		transition: .3s;
		display: none;
	}
}